function $(id) {
  return document.getElementById(id);
}
class Zoom {
  constructor() {
    this.zoomBox = $("zoomBox");
    this.midArea = $("midArea");
    this.midImg = this.midArea.children[0]; //中图
    this.zoom = $("zoom"); //放大镜
    this.bigArea = $("bigArea");
    this.bigImg = this.bigArea.children[0]; //大图
    this.smallArea = $("smallArea");
    this.smallImgs = this.smallArea.children;

    this.move();
  }
  move() {
    this.midArea.onmouseover = () => {
      this.zoom.style.display = "block"; //放大镜显示
      this.bigArea.style.display = "block"; //大图显示
    };
    this.midArea.onmouseout = () => {
      this.zoom.style.display = "none";
      this.bigArea.style.display = "none";
    };
    this.midArea.onmousemove = (e) => {
      let ml = this.midArea.offsetWidth - this.zoom.offsetWidth; //放大镜最大left值，限定范围
      let mt = this.midArea.offsetHeight - this.zoom.offsetHeight;
      //放大镜跟着鼠标走，鼠标在放大镜中间
      let l = e.pageX - this.zoomBox.offsetLeft - this.zoom.offsetWidth / 2;
      let t = e.pageY - this.zoomBox.offsetTop - this.zoom.offsetHeight / 2;

      l = l <= 0 ? 0 : l >= ml ? ml : l;
      t = t <= 0 ? 0 : t >= mt ? mt : t;

      this.zoom.style.left = l + "px";
      this.zoom.style.top = t + "px";

      this.bigImg.style.left =
        (-this.midArea.offsetWidth / this.zoom.offsetWidth) * l + "px";
      this.bigImg.style.top =
        (-this.midArea.offsetHeight / this.zoom.offsetHeight) * t + "px";
    };
    //图片切换
    for (let i = 0; i < this.smallImgs.length; i++) {
      this.smallImgs[i].onmouseover = () => {
        this.midImg.src = this.bigImg.src = this.smallImgs[i].src;
      };
    }
  }
}

new Zoom();
